<template>
  <div>
    <div style="display: flex; justify-content: center">
      <div
        style="
          text-align: center;
          margin-top: 50px;
          background: #80ffa5;
          padding: 10px;
          width: 120px;
          border-radius: 5px;
          z-index: 1;
        "
        @click="clickshow()"
      >
        吸毒前科
      </div>
    </div>
    <div class="indexposation">
      <div class="flex">
        <div v-if="!show" class="leftshow" @click="show = true">
          <i class="iconfont icon-youyi icontext"></i>
        </div>
        <div class="leftback" v-else @click="show = false">
          <div>收起汇总</div>
          <i class="iconfont icon-zuoyi icontext"></i>
        </div>
        <slidemodel :placement="'left'" :showSlid="show">
          <Binding />
          <!-- <LeftEchart /> -->
        </slidemodel>
        <slidemodel :placement="'right'" :showSlid="userInfoShow">
          <Detail :detail="detail" @toBack="toBack" />
        </slidemodel>
      </div>
    </div>
    <div class="userInfo" v-if="userInfoShow">
      <InfoLayer
        :infoLayerData="userInfo"
        :householder="householder"
        @toCloseLayer="toCloseLayer"
        @toDetail="toDetail"
      />
    </div>
    <!-- <div class="infoEdit">
      <div class="infoEditbody">
        <InfoEdit />
      </div>
    </div> -->
  </div>
</template>

<script>
// import LeftEchart from "@/components/leftEchart.vue";
// import RightEchart from "@/components/rightEchart.vue";
import Detail from "@/components/detail.vue";
// import InfoEdit from "@/components/InfoEdit.vue";
import slidemodel from "@/components/slidemodel.vue";
import InfoLayer from "@/components/InfoLayer.vue";
import Binding from "@/components/Binding.vue";

export default {
  name: "Home",
  components: {
    // LeftEchart,
    // RightEchart,
    Detail,
    slidemodel,
    // InfoEdit,
    InfoLayer,
    Binding,
  },
  data() {
    return {
      show: false,
      showSlid: false,
      userInfoShow: false,
      userInfo: [],
      householder: {
        name: "暂无住户信息",
        address: "暂无住户信息",
      },
      detail: {},
    };
  },
  mounted() {},
  methods: {
    leftshow() {
      this.show = false;
    },
    clickshow() {
      // this.showSlid = true;
      this.userInfoShow = true;
      this.$axios
        .getHouseholdInfo({
          windowId: "A5_10_w_0",
        })
        .then((res) => {
          if (res.data.length > 1) {
            res.data.forEach((item) => {
              if (item.zpHouseholdIdentity == "户主") {
                this.householder.name = item.zpHouseholdName;
                this.householder.address = item.zpHouseholdAdress;
              }
            });
          }
          this.userInfo = res.data;
        });
    },
    toDetail(val) {
      console.log(val);
      this.detail = val;
      this.showSlid = true;
    },
    toBack(val) {
      this.showSlid = val;
    },
    toCloseLayer() {
      this.userInfoShow = false;
    },
  },
};
</script>

<style scoped>
body {
  margin: 0;
  background: #e9e9e9;
}
.indexposation {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.left {
  width: 500px;
}
.leftshow {
  position: absolute;
  /* top: 6px; */
  padding: 3px 15px 5px 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 0 30px 30px 0;
  z-index: 2;
  cursor: pointer;
}
.leftback {
  position: absolute;
  padding: 3px 15px 5px 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 0 30px 30px 0;
  display: flex;
  align-items: center;
  z-index: 2;
  cursor: pointer;
}
.leftback div {
  font-size: 24px;
  color: #477eff;
  padding-right: 5px;
}
.icontext {
  color: #477eff;
  font-size: 36px;
  font-weight: bold;
}
.right {
  width: 440px;
  margin: 0 15px 0 0;
}
.infoEdit {
  position: absolute;
  width: 100%;
  z-index: 1;
}
.infoEditbody {
  display: flex;
  justify-content: center;
}
.userInfo {
  position: absolute;
  top: 244px;
  left: 482px;
  height: 665px;
  z-index: 2;
}
</style>
